<template>
	<view class='device-item'>
		<view @click="onSendEdit()">
			<view class="item-top">{{data.userName}}</view>
			<view class="item-tip address">位置：{{data.address}}</view>
			<view class="item-tips state" :class="item.status=='2'?'is-right' : 'is-error'"
				v-for="(item,key) in data.productList" :key="key">
				{{item.time}}：{{item.productData}}
			</view>
		</view>
		<view class="bottom_box">
			<view class="btn btn_close" @click="onTime('1')" v-if="isShow(2)">取消</view>
			<view class="btn btn_open" @click="onTime('2')" v-if="isShow(1)">送达</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupView">
				<view class="title">
					选择{{opType==='1'?'取消':''}}配送时间
					<image src="/static/icon_close.png" @click="closePopup" />
				</view>
				<view class="list">
					<block v-for="(item, index) in data.productList" :key="index">
						<view class="item" :class="item.planId == selected.planId && 'active'"
							v-if="(opType==='1'&&item.status==2)||(opType==='2'&&item.status==1)"
							@click="clickListItem(item,index)">
							{{item.time}}
							<image class="icon-yes" src="/static/icon_yes.png" v-if="item.planId == selected.planId" />
						</view>
					</block>
				</view>
				<view class="popup_btn" @click="confirmPopup">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import Formatter from '/common/formatter.js'
	import {
		ref
	} from 'vue';
	const emit = defineEmits(['onRefresh'])
	const props = defineProps({
		data: {
			type: Object
		},
		date: {
			type: String
		}
	})
	// 选择配送时间弹框-dom对象
	const popup = ref()
	// 选择配送时间弹框-选中
	const selected = ref({})
	const selectedIndex = ref(0)
	// 操作类型 1-取消  2-送达
	const opType = ref('')
	const isshow = ref(false)
	// 选择配送时间-选择数据
	const isShow = (type) => {
		let bool = false
		props.data.productList.forEach((item) => {
			if (!bool && item.status === type) {
				bool = true
			}
		})
		return bool
	}
	// 选择配送时间-打开弹框
	const onTime = (type) => {
		opType.value = type
		popup.value.open()
	}
	// 选择配送时间-选择数据
	const clickListItem = (item, index) => {
		selected.value = item
		selectedIndex.value = index
	}
	// 选择配送时间-确定
	const confirmPopup = () => {
		console.log(selected.value)
		onSubmit()
		popup.value.close()
	}
	// 关闭所有弹框
	const closePopup = () => {
		popup.value.close()
	}
	// 水控服务-顶部汇总数据
	const onSubmit = () => {
		uni.showLoading({
			title: '正在加载',
		})
		getApp().globalData.serviceApi({
			"planIds": [props.data.productList[selectedIndex.value].planId],
			"status": opType.value
		}, 'served', "POST").then(res => {
			uni.hideLoading()
			uni.showToast({
				icon: 'none',
				title: '操作成功'
			})
			emit('onRefresh')
		}).catch(error => {
			uni.showToast({
				icon: 'none',
				title: error.message
			})
		})
	}
	const format = (valveStatus) => {
		let valveStatusList = valveStatus.split(',')
		return valveStatusList
	}
	const onSendEdit = () => {
		uni.navigateTo({
			url: '/pages_other/send/edit?item=' + JSON.stringify(props.data) + '&date=' + props.date
		})
	}
</script>

<style lang="scss" scoped>
	.popupbox {
		height: 500rpx;
	}

	.device-item {
		width: calc(100% - 64rpx);
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 32rpx;
		margin: 0 auto 32rpx;
		background-color: #ffffff;
		box-shadow: 0 8rpx 24rpx 0rpx rgba(0, 0, 0, 0.08);


		.item-top {

			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 550;
			color: #222222;
		}

		.is-right {
			color: #00CC88 !important;
		}

		.is-error {
			color: #FE3B30 !important;
		}

		.item-tips {
			width: 100%;
			display: flex;
			// justify-content: space-between;
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #666666;
			margin-top: 20rpx;
			// margin-bottom: 24rpx;
			flex-wrap: wrap;

			.item-tip {
				width: 48%;

				// margin-right: 160rpx;
				&:nth-child(1) {
					margin-top: 0;
				}

				&:nth-child(2) {
					margin-top: 0;
				}
			}
		}

		.item-tip {
			color: #666666;
			font-size: 24rpx;
			margin-top: 20rpx;

			&:nth-child(2) {
				margin-top: 28rpx;
			}
		}

		&.batchwidth {
			width: 85%;
		}
	}



	.bottom_box {
		display: flex;
		justify-content: flex-end;
		padding-top: 20rpx;
		border-top: 1px solid #EDEFF0;

		margin-top: 20rpx;

		.btn {
			width: 128rpx;
			height: 52rpx;
			border-radius: 28rpx;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn_close {
			border: 2rpx solid #1D66FF;
			color: #216CFF;
			margin-right: 20rpx;
		}

		.btn_open {
			background: #206AFF;
			color: #FFFFFF;
		}

		.isclose {
			border: 2rpx solid #CBCED1;
			color: #979DA6;
		}

		.isopen {
			background: #A1B7E3;
		}
	}

	.popupbox {
		width: 100%;
		height: 500rpx;
		box-sizing: border-box;
		padding: 0 32rpx;

		.popup_title {
			height: 96rpx;
			line-height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;


			.cloase {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #969799;
			}

			.title {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 550;
				color: #323233;
			}

			.confirm {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #206AFF;
			}
		}

		.picker-view {
			width: 100%;
			height: 100%;

		}

		::v-deep .uni-picker-view-group {
			text-align: center;
			line-height: 50px;
		}
	}

	.popupView {
		background-color: #ffffff;
		padding: 0 48rpx;
		border-radius: 16rpx 16rpx 0 0;
		display: flex;
		flex-direction: column;
		padding-bottom: 50rpx;

		.title {
			position: relative;
			// height: 50rpx;
			line-height: 120rpx;
			text-align: center;
			color: #2F3338;
			font-size: 32rpx;
			font-weight: bold;

			&>image {
				position: absolute;
				top: 44rpx;
				right: 0;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.list {
			max-height: 600rpx;
			overflow: auto;
			margin-bottom: 40rpx;

			.item {
				position: relative;
				height: 100rpx;
				line-height: 100rpx;
				color: #2F3338;
				font-size: 32rpx;

				.icon-yes {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 48rpx;
					height: 48rpx;
				}

				.num-box {
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 6rpx;
					overflow: hidden;

					.btn {
						width: 60rpx;
						text-align: center;
						font-size: 40rpx;
						background-color: #edeff0;
						color: #999;

						&.active {
							background-color: #175DFF;
							color: #fff;
						}
					}

					.num {
						width: 100rpx;
						text-align: center;
					}
				}
			}
		}

		.popup_btn {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(90deg, #175DFF 0%, #2977FF 100%);
			box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(23, 93, 255, 0.3);
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>